<template>
	<div class="content">
		<van-nav-bar title="订单" left-text="返回" left-arrow @click-left="onClickLeft" />
		<div class="swiper">
			<van-tabs v-model:active="active" swipeable sticky>
				<van-tab v-for="item in tabList" :title="item.tab">
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
						<div class="one" v-for="(item1, index1) in item.orderList" v-if="item.orderList.length">
							<div class="name">{{ item1.s_name }}
								<van-icon name="arrow" />
							</div>
							<div class="time">{{ item1.s_create_time }}</div>
							<div class="operate" v-if="active == 0">
								<van-button type="primary" size="mini"
									@click="toPay(tabList[active].orderList[index1].orealid, tabList[active].orderList[index1].total_price, index1)">
									支付
								</van-button>
							</div>
							<div class="status">{{ status(item1.ostatus) }}</div>
							<van-loading type="spinner" color="#1989fa"
								style="position:relative ;left:50%;transition:transform(-50%);" v-if="!count" />
							<div class="small" v-for="item2 in item1.list" v-else :key="item2">
								<lazy-component>
									<van-card :num="item2.num" :price="item2.m_price" :desc="item2.m_intro"
										:title="item2.m_name" :thumb="item2.m_pic" :lazy-load="true" />
								</lazy-component>
							</div>
							<div class="total">
								<div class="money">￥{{ (item1.total_price * 1).toFixed(2) }}</div>
								<div class="sum">共{{ item1.sum }}件</div>
								<div class="realid">订单编号:{{ item1.orealid }}</div>
							</div>
						</div>
						<van-empty class="empty"
							image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
							description="空空如也" v-else />
					</van-pull-refresh>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { Toast } from 'vant'
const request = require('@/network/request').default;
export default {
	name: 'Order',
	props: [],
	setup(props, context) {
		const onClickLeft = () => history.back();
		const count = ref(false);
		const active = ref(0)
		const isLoading = ref(false);
		const tabList = ref([])
		const status = ((ostatus) => {
			switch (ostatus) {
				case 0:
					return '待支付'
					break;
				case 1:
					return '待取餐'
					break;
				case 2:
					return '已完成'
					break;
				case 3:
					return '退单'
					break;
			}
		})
		let hasPay = computed(() => {
			return
		})
		const loadData = () => {
			let userInfo = JSON.parse(localStorage.getItem('userInfo'))
			request.post('/userorderlist', userInfo.uid).then(ress => {
				if (ress.code == -1) {
					console.log(ress)
				} else if (ress.code == 0) {
					console.log(ress)
					tabList.value.forEach(item => item.orderList = [])
					ress.data.forEach(item => {
						tabList.value[item.ostatus].orderList.push({
							s_name: item.sname,
							s_create_time: item.ocreatetime,
							total_price: item.ototalprice,
							sum: item.sum,
							oid: item.oid,
							orealid: item.orealid,
							ostatus: item.ostatus,
							list: []
						})
					})
					request.post('/userorderlistdetail', userInfo.uid).then(res => {
						if (res.code == -1) {
							console.log(res)
						} else if (res.code == 0) {
							console.log(res)
							res.data.forEach(item1 => {
								tabList.value[item1.ostatus].orderList.forEach(item2 => {
									if (item2.oid == item1.odoid) {
										item2.list.push({
											m_name: item1.mname,
											m_intro: item1.mintro,
											m_pic: item1.mpic,
											m_price: item1.mprice,
											num: item1.odmcount
										})
									}
								})
							})
							count.value = true
							isLoading.value = false;
						}
					})
				}
			})
		}
		onMounted(() => {
			loadData()
		})
		tabList.value = [
			{
				tab: "待支付",
				orderList: []
			},
			{
				tab: "待取餐",
				orderList: []
			},
			{
				tab: "已完成",
				orderList: []
			},
			{
				tab: "退单",
				orderList: []
			}
		]
		const toPay = (orealid, total_price, index) => {
			console.log(orealid, total_price, index)
			window.open(`http://orderonline.cwiyc.top:9090/alipay/pay?subject=${orealid}&traceNo=${orealid}&totalAmount=${total_price}`)
		}
		const onRefresh = () => {
			loadData()
		};
		return {
			onClickLeft,
			count,
			isLoading,
			onRefresh,
			active,
			tabList,
			status,
			toPay
		};
	},
}
</script>

<style scoped lang="scss">
.content {
	height: 100%;
	min-height: 100vh;
	background-color: rgb(240, 236, 236);


	.swiper {
		height: 100%;
		padding-bottom: 5rem;

		.one {
			width: 95%;
			border-radius: 10px;
			margin: 0 auto;
			// height: 6rem;
			margin-top: 0.5rem;
			background-color: #fff;
			position: relative;

			.name {
				font-size: 16px;
				padding: 8px 12px 0 12px;
				font-weight: bold;
			}

			.time {
				font-size: 12px;
				padding: 0px 12px 0 12px;
			}

			.operate {
				position: absolute;
				z-index: 999;
				top: 0.5rem;
				right: 6rem;
			}

			.status {
				position: absolute;
				z-index: 999;
				top: 0.8rem;
				right: 1rem;
				color: green;
				font-weight: bold;
				font-size: small;
			}

			.small {
				width: 100%;
			}

			.total {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				padding: 12px 15px 10px 0;

				.money {
					font-weight: bold;
					font-size: 14px;
				}

				.sum {
					font-size: 6px;
					margin-right: 5px;
				}

				.realid {
					font-size: 6px;
					position: relative;
					left: -6rem;
				}
			}
		}

		.empty {
			height: 70vh;
		}
	}
}
</style>